.tjenestefelt {
  width: 100%;
  box-sizing: border-box; /* Padding inkludert */
  margin-top: 15%;
  padding-left: 7%;
  padding-right: 7%;
  width: 85%;
  display: flex;
  flex-direction: row;
  justify-content: space-between;  /* Justerer elementene til venstre */
  align-content: flex-start;
}

.introtjenester {
  font-family: "classico-urw", sans-serif;
  font-weight: 150;
  font-style: normal; 
  line-height: 1.4;
  color: #000000;
  
  font-size: clamp(10px, 2.5vw, 30px); 
  text-align: left;
  width: 55%; /* Juster bredde etter behov */
  transition: 2s ease;
  opacity: 1;
}

/* Responsiv tilpasning for mobil */
@media (max-width: 600px) {
  .introtjenester {
    width: 90%; /* Gjør teksten bredere på små skjermer */
    font-size: clamp(10px, 3vw, 16px); /* Juster skriftstørrelsen for små skjermer */
  }

  .tjenestefelt {
    padding: 30px; /* Øk padding for mer plass på små skjermer */
    gap: 15px; /* Mindre avstand mellom elementene */
  }
}

/*tjenestercode */

.tjenester {
  font-family: "classico-urw", sans-serif;
  font-weight: 400;
  font-style: normal;
  color: #000000;
  z-index: 9;

  display: flex;
  flex-direction: column;
  justify-content: center;  
  width: 100%;
  transition: all 1s ease;
  box-sizing: border-box; /* Forutsigbar oppførsel med padding og margin */
  padding-left: 12%;
  padding-right: 12%;
  margin-top: 10%;
  margin-bottom: 10%;
}

/* Spesifikk skrifttype for Safari */
@media screen and (min--moz-device-pixel-ratio: 0) {
  .tjenester {
    font-weight: 100;
  }
}

.tjenester > * {
  flex: 1;
  min-height: min-content;
}

.tjenesterboks {
  position: relative;
  width: 100%;
  display: flex;
  flex-direction: row;
  justify-content: space-between;  /* Justerer elementene til venstre */
  flex-wrap: nowrap;  /* Hindre at elementene bryter til ny linje */
  align-items: flex-start;  /* Justerer innholdet til bunnen av port */
  min-height: 500px;/* Sett min høyde for å sikre at div-en har plass */
  transition: 1s ease;
  margin-bottom: 10%;
  border-top: 1px solid #666669; /* Toppborders */
  box-sizing: border-box; /* Forutsigbar oppførsel med padding og margin */
  padding-top: 3%;

}

/* Responsiv tilpasning for mobil */
@media (max-width: 900px) {
  .tjenester {
    margin-left: 5%;
  }
  .tjenesterboks {
    min-height: 150px;
    flex-direction: column;
    flex-wrap: wrap;  
    align-items: flex-end;  /* Justerer innholdet til bunnen av port */
  }
}


.tjenesterboks:hover div {
  cursor: pointer;
  transition: 0.5s ease;
  left: 50%;
}

.containertjenester {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;  /* Justerer innholdet til bunnen av port */
  width: 40%;
  height: 100%;
}

.imagetjenester {
  display: block;
  visibility: visible;
  backface-visibility: hidden;
  transition: 1.0s ease;
  height: auto;
  max-width: 40%;
}

/* Responsiv tilpasning for mobil */
@media (max-width: 900px) {
  .containertjenester {
    width: 100%;
  }
  .imagetjenester {
    max-width: 100%;
    margin-bottom: 5%;
  }

}

.tjenester h1 {
  font-size: 1.1vw;
  text-align: left;
  color: black;
  height: 100%;
}

@keyframes animate-in {
  0% {
    opacity: 0;
    transform: translateY(50px);  /* Starter nedenfra */
  }
  100% {
    opacity: 1;
    transform: translateY(0);  /* Slutter på normal posisjon */
  }
}

.tjenesterboks {
  opacity: 0;  /* Start med at elementet er usynlig */
  animation: animate-in 2s ease-out forwards; /* Legg til animasjon */
}


/*telefon*/

@media (max-width: 600px) {

  #slogan {
    font-size: 20px;
  }

  .tjenester {
    grid-template-columns: auto;
    width: 90%;
  }

  .tjenesteboks {
    flex-direction: column;
    align-items: center;
  }
  .tjenesteboks:nth-child(2n) {
    flex-direction: column;
  }

  .imagetjenester {
    margin-left: auto;
    margin-right: auto;
  }
}
/*enorme skjermer*/
@media (min-width: 1900px) {
  .tjenester {
    width: 40%;
  }
}